<template>
    <div id="div22" style="width: 100%;height:25vh;"></div>
</template>
<script setup lang="ts">
import {onMounted} from 'vue'
import * as echarts from 'echarts';

onMounted(()=>{
 var myChart = echarts.init(document.getElementById('div22'));
  window.addEventListener('resize', function() {
    myChart.resize();
  });
type EChartsOption = echarts.EChartsOption;

var chartDom = document.getElementById('div22')!;
var myChart = echarts.init(chartDom);
var option: EChartsOption;
option = {
  legend: {
    // top:'bottom',
    right:'right',
    textStyle:{
      color:"orange"
    }
  },
  itemStyle:{
    borderWidth:0
  },
 
  series: [
    {
    //   name: 'Nightingale Chart',
      type: 'pie',
      radius: [0, 60],
      
      center: ['50%', '50%'],
      roseType: 'area',
       avoidLabelOverlap: false,
        labelLine: {
                show: true  // 设置为false隐藏连线
            },
            label: {
            show: true // 隐藏所有标签
        },
      data: [
        { value: 20, name: '监控类' },
        { value: 28, name: '消防类' },
        { value: 78, name: '其他类' },
      ],
     
    }
    
  ]
};



option && myChart.setOption(option);


})

</script>